{"id":16897,"date":"2021-03-25T14:28:09","date_gmt":"2021-03-25T18:28:09","guid":{"rendered":"https:\/\/www.gravityforms.com\/?p=16897"},"modified":"2021-04-27T10:05:50","modified_gmt":"2021-04-27T14:05:50","slug":"drag-and-drop-column-control-two-five","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/blog\/drag-and-drop-column-control-two-five\/","title":{"rendered":"Enjoy Drag-and-Drop Column Control With Gravity Forms 2.5"},"content":{"rendered":"

\"\"<\/p>\n

The launch of Gravity Forms version 2.5 is one of our most important releases to date. Boasting a redesigned form editor UI with drag-and-drop column control, you will find the form creation experience is even easier and more intuitive than ever before.<\/p>\n

<\/p>\n

In this article, you\u2019ll get a glimpse of our beautiful new form editor, and find out just how easy it is to create forms with columns (no CSS Ready Classes required!) using Gravity Forms 2.5.<\/p>\n

Let\u2019s jump in…<\/p>\n

Gravity Forms 2.5 is now available<\/a> to all new and existing customers. Make sure you check out the 2.5 Resource Hub<\/a> to find out everything you need to know about this update!<\/div>\n

Introducing Drag-and-Drop Column Control<\/h2>\n

Creating forms with columns has always been a simple process with Gravity Forms CSS Ready Classes<\/a>. However with 2.5, you will now find column control built into the form editor. This enables users to easily drag and drop form fields into columns and design form layouts to fit any space and style.<\/p>\n

Each form can contain up to four columns of varying widths. Due to this, you can now design forms to your exact requirements that fit perfectly with the space available on your website.<\/p>\n

So let\u2019s now take a look at how to get started with 2.5 column control…<\/p>\n

Create Multiple Columns<\/h2>\n

\"column-drop-zones\"<\/p>\n

With 2.5, form fields can be easily dragged and dropped onto the form editor canvas, to the left or right of an existing field, to create a new column.<\/p>\n

Drag Existing Fields to Create Columns<\/h2>\n

\"field-handles-drop-zones\"<\/p>\n

Within the editor canvas, you can drag existing fields into the \u2018column drop zone\u2019 – the editor will then automatically resize all fields within the drop zone to create columns of equal width.<\/p>\n

Resize Column Width<\/h2>\n

\"column-resize\"<\/p>\n

2.5 also allows you to adjust the width of each column by using the Column Handles to shrink or enlarge a field. This gives you the flexibility to create different sized columns depending on the needs of your form.<\/p>\n

For further information on the 2.5 editor and drag-and-drop column control, check out these resources\u2026<\/p>\n